<template>
  <div class="flexContent">
    <h3>要货单信息</h3>
    <div class="top">
      <div class="rows">
        <span class="col">
          <div class="txt">门店名称:</div><span>{{ storeName }}</span>
        </span>
        <span class="col">
          <div class="txt">门店地址:</div><span>{{ storeAddress }}</span>
        </span>
        <span class="col">
          <div class="txt">要货单号:</div><span>{{ requireNumber }}</span>
        </span>
      </div>
      <div class="rows">
        <span class="col">
          <div class="txt">点采金额:</div><span>{{ commodityAmount }}元</span>
        </span>
        <span class="col">
          <div class="txt">分录日期:</div><span>
            <span v-for="(item, index) in entriesDays" :key="index" class="dateClass">{{ item | fileTime(dayList)
              }}</span>
          </span>
        </span>
        <!-- <span class="col">
          <div class="txt">要货单号:</div><span>{{ requireNumber }}</span>
        </span> -->
      </div>
      <div style="display: flex;flex-wrap: wrap;">
        <span>点采编号：</span><span v-for="item in pickList" :key="item" style="margin-right: 20px;word-wrap:break-word;">{{ item }}</span>
      </div>
    </div>
    <div class="table">
      <div>
        <el-table border class="tablebox" :data="storeRequireList" max-height="462" size="medium">
          <el-table-column align="center" label="序号" type="index" width="80" />
          <el-table-column align="center" label="商品名称" prop="commodityName" />
          <el-table-column align="center" label="规格" prop="commodityStandard" />
          <el-table-column align="center" label="单位" prop="commodityUnit" />
          <el-table-column align="center" label="产地" prop="commodityProducer" />
          <el-table-column align="center" label="商品配送规格" prop="deliveryNorms" />
          <el-table-column align="center" label="件数(配送规格)" prop="procureNumber" />
          <el-table-column align="center" label="数量" prop="procureCount" />
        </el-table>
      </div>
    </div>
    <div class="returnBtn">
      <el-button class="celBtn" @click="returnList">返 回</el-button>
    </div>
  </div>
</template>

<script>
import { getStoreDetailRequireList } from '@/api/entrycenter'
export default {
  name: 'ToOrderDetail',
  data() {
    return {
      storeRequireList: [],
      id: '',
      commodityAmount: 0,
      requireNumber: '',
      entriesDay: '',
      entriesDays: [],
      storeAddress: '',
      storeName: '',
      pickList: [],
      dayList: {
        1: '周一',
        2: '周二',
        3: '周三',
        4: '周四',
        5: '周五',
        6: '周六',
        7: '周日'
      }
    }
  },
  created() {
    this.id = this.$route.query.id ? this.$route.query.id : ''
    this.getStoreDetailRequireList()
  },
  methods: {
    async getStoreDetailRequireList() {
      const res = await getStoreDetailRequireList({ id: this.id })
      if (res.code === 200) {
        console.log(res.data, '详情')
        this.requireNumber = res.data.requireNumber;
        this.commodityAmount = res.data.commodityAmount
        this.storeAddress = res.data.storeAddress
        this.storeName = res.data.storeName
        this.pickList = res.data.pickList
        this.entriesDays = res.data.entriesDays
        this.storeRequireList = res.data.storeRequireList
      }
    },
    returnList() {
      this.closeTag('toOrderInfo')
    }
  }
}
</script>

<style lang="scss" scoped>
.flexContent {
  h3 {
    margin: 0;
    margin-bottom: 10px;
  }

  .top {
    .rows {
      display: flex;
      margin-bottom: 10px;
      height: 40px;
      line-height: 40px;

      .col {
        width: 33%;
        display: flex;
        padding-right: 10px;
        vertical-align: middle;

        .txt {
          width: 80px;
        }

        .dateClass {
          padding: 0 5px;
          display: inline-block;
          margin-right: 5px;
          background-color: rgb(113, 113, 240);
          color: #fff;
          font-size: 12px;
          border-radius: 3px;
          margin-bottom: 5px;
        }

        .pickList {
          display: flex;
          flex: 1;
          flex-wrap: nowrap;

          .pickListItem {
            flex: 1;
            height: 30px;
            padding: 0 5px;
            margin: 0;
          }
        }
      }
    }
  }
}
</style>
